﻿@using XRepair.Models

@model List<Order>

@{
    ViewBag.Title = "Index";
    
    List<Service> activeServices = MvcXRepairAdmin.CacheData.Cache.GetAllActiveServices();
    Dictionary<int, string> serviceDict = activeServices.ToDictionary(x => x.ID.Value, x => x.ServiceName);

    List<City> activeCities = MvcXRepairAdmin.CacheData.Cache.GetAllActiveCities();
    Dictionary<int, string> cityDict = activeCities.ToDictionary(x => x.ID.Value, x => x.CityName);

    List<State> activeStates = MvcXRepairAdmin.CacheData.Cache.GetAllActiveStates();
    Dictionary<int, string> stateDict = activeStates.ToDictionary(x => x.ID.Value, x => x.StateName);

    List<OrderStatus> orderStatus = MvcXRepairAdmin.CacheData.Cache.GetAllOrderStatus();
    Dictionary<int, string> orderStatusDict = orderStatus.ToDictionary(x => x.ID.Value, x => x.Description);

    List<User> activeUsers = MvcXRepairAdmin.CacheData.Cache.GetAllActiveUsers();
    Dictionary<int, string> customerDict = activeUsers.ToDictionary(x => x.ID, x => x.Username);

    Dictionary<int?, string> technicianDict = activeUsers.ToDictionary(x => (int?)x.ID, x => x.Username);
}

@section head
{
    <link type="text/css" href="@Url.Content(@"~\Content\themes\base\jquery-ui.css")" rel="stylesheet" />
    
    <style type="text/css">
        #orderList 
        {
            table-layout: fixed;
            width:1024px;
            border-collapse: collapse;
        }

        #orderList td 
        {
            border: 1px solid #999;
            vertical-align: top;
            overflow: hidden;
        }

        dlgEditOrder td {
            vertical-align: top;
        }

        .lnkEditOrder {
            cursor: pointer;
        }

        #orderList thead tr {
            font-weight: bold;
            background: #999;
        }

    </style>
}

<h2>List of orders</h2>

<table id="orderList">
    <thead>
        <tr>
            <td class="hide">[ID]</td>
            <td>[Customer]</td>
            <td>[Service]</td>
            <td>[TechnicianID]</td>
            <td>[AcceptedAt]</td>
            <td>[TechnicianDescription]</td>
            <td>[DueDate]</td>
            <td>[Status]</td>
            <td>[ExtraFee]</td>
            <td>[ExtraFeeNote]</td>
            <td>[BillingAddress]</td>
            <td>[ShippingAddress]</td>
            <td>[City]</td>
            <td>[State]</td>
            <td>[ZipCode]</td>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        { 
            <tr>
                <td class="hide">@item.ID</td>
                <td class="hide">@item.CustomerID</td>
                <td>@customerDict[item.CustomerID]</td>
                <td class="hide">@item.ServiceID</td>    
                <td>@serviceDict[item.ServiceID]</td>
                <td class="hide">@item.TechnicianID</td>
                <td>@if (item.TechnicianID != null)
                    {
                        @technicianDict[item.TechnicianID];
                    }
                </td>
                <td>@if (item.AcceptedAt != null)
                    { 
                        @String.Format("{0:M/d/yyyy}", item.AcceptedAt);
                    }
                </td>
                <td>@item.TechnicianDescription</td>
                <td>@if (item.DueDate != null)
                    { 
                        @String.Format("{0:M/d/yyyy}", item.DueDate);
                    }</td>
                <td class="hide">@item.StatusID</td>
                <td>@orderStatusDict[item.StatusID]</td>                
                <td>@item.ExtraFee</td>
                <td>@item.ExtraFeeNote</td>
                <td>@item.BillingAddress</td>
                <td>@item.ShippingAddress</td>
                <td class="hide">@item.CityID</td>
                <td>@cityDict[item.CityID]</td>
                <td class="hide">@item.StateID</td>
                <td>@stateDict[item.StateID]</td>
                <td>@item.ZipCode</td>
                <td>
                    <a class="lnkEditOrder">Edit</a>
                    <br />@Html.ActionLink("Delete", "Delete", new { id = @item.ID })
                </td>
            </tr>
        }
    </tbody>
</table>

<div id="dlgEditOrder" class="hide" title="Edit order">
    @Html.Partial("EditPartial", new Order())
</div>

@section lazy
{
    <script type="text/javascript" src="@Url.Content(@"~\Scripts\jquery-ui-1.8.20.min.js")"></script>
    <script type="text/javascript">
        $(function () {
            $("#dlgEditOrder").dialog({
                autoOpen: false,
                height: 700,
                width: 530,
                modal: false,
                resizable: false
            });

            $("#btnCancelEdit").click(function () {
                $("#dlgEditOrder").dialog("close");
            });

            $(".lnkEditOrder").click(function () {
                var contextObj = $(this);
                BindCurrentRowToModel(contextObj);
                $("#dlgEditOrder").dialog("open");
            });
            $("#dlgEditOrder #StateID").change(function(){
                UpdateCityOptions($(this));
            });
            //$("#dlgEditOrder #datepicker").click(function(){
            //    alert("aaaa");
            //    //$("#datepicker").datepicker()
            //});
            $("#dlgEditOrder #AcceptedAt").datepicker();
            $("#dlgEditOrder #DueDate").datepicker();

        });

        function UpdateCityOptions(contextObj)
        {
            var newVal = $(contextObj).val();
            var html = "";

            if(!newVal == false)
            {
                html = '<option value="" selected="selected">Select city</option>';

                for(var i = 0; i < cityJson.length; i++)
                {
                    var cityItem = cityJson[i];

                    if(cityItem.StateID == newVal)
                    {
                        html += '<option value="' + cityItem.ID + '">' + cityItem.CityName + '</option>';
                    }
                }
            }
            else
            {
                html = '<option value="" selected="selected">Wait for selected brand</option>';
            }

            $(contextObj).closest("table").find("#CityID option").remove();            
            $(contextObj).closest("table").find("#CityID").append(html);
        }

        function BindCurrentRowToModel(contextObj) {

            var currentRowDataArr = [];
            var currentRow = $(contextObj).closest("tr");

            $('td', currentRow).each(function (i, td) {
                currentRowDataArr.push($(td).html());
            });

            $("#dlgEditOrder #ID").val(currentRowDataArr[0]);
            $("#dlgEditOrder #CustomerID option[value='" + currentRowDataArr[1] + "']").attr("selected", "selected");
            $("#dlgEditOrder #ServiceID option[value='" + currentRowDataArr[3] + "']").attr("selected", "selected");
            $("#dlgEditOrder #TechnicianID option[value='" + currentRowDataArr[5] + "']").attr("selected", "selected");
            $("#dlgEditOrder #AcceptedAt").val(currentRowDataArr[7]);
            $("#dlgEditOrder #TechnicianDescription").val(currentRowDataArr[8]);
            $("#dlgEditOrder #DueDate").val(currentRowDataArr[9]);
            $("#dlgEditOrder #StatusID option[value='" + currentRowDataArr[10] + "']").attr("selected", "selected");
            $("#dlgEditOrder #ExtraFee").val(currentRowDataArr[12]);
            $("#dlgEditOrder #ExtraFeeNote").val(currentRowDataArr[13]);
            $("#dlgEditOrder #BillingAddress").val(currentRowDataArr[14]);
            $("#dlgEditOrder #ShippingAddress").val(currentRowDataArr[15]);

            $("#dlgEditOrder #StateID option[value='" + currentRowDataArr[18] + "']").attr("selected", "selected");

            var stateVal = currentRowDataArr[18];
            var html = "";

            if (!stateVal == false) {
                for (var i = 0; i < cityJson.length; i++) {
                    var cityItem = cityJson[i];
                    if (cityItem.StateID == stateVal) {
                        html += '<option value="' + cityItem.ID + '">' + cityItem.CityName + '</option>';
                    }
                }

                if (!html == true) {
                    html = '<option value="" selected="selected">Select city</option>';
                }
            }
            else {
                html = '<option value="" selected="selected">Wait for selected state</option>';
            }

            $("#dlgEditOrder #CityID option").remove();
            $("#dlgEditOrder #CityID").append(html);

            $("#dlgEditOrder #CityID option[value='" + currentRowDataArr[16] + "']").attr("selected", "selected");

            $("#dlgEditOrder #ZipCode").val(currentRowDataArr[20]);

        
        }
        var cityJson = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(activeCities))
    </script>

}
